<template>
	<view class="content">
		<image src="../../static/logo.png" class="logo"></image>
		<MyInput hint="手机号" @getInput="getPhone" class="input" type="number"></MyInput>
		<MyInput hint="密码" @getInput="getPass" class="input" :isPass="isPass"></MyInput>
		<button @click="loginConfirm" class="btn_login">登录</button>
		<view class="registerView">
			<text>没有账号？</text>
			<text class="textToRegister" @click="checkToRegister">点击注册</text>
		</view>
	</view>
</template>

<script>
	import MyInput from "@/components/my-input/my-input.vue"
	export default {
		data() {
			return {
				phone: 13170314323,
				password: 123,
				inputPhone: "",
				inputPass: "",
				isPass:true
			}
		},
		components: {
			MyInput
		},
		methods: {
			loginConfirm() {
				var iPhone = this.inputPhone
				var iPass = this.inputPass
				var loginInfo = ""
				var vue = this
				if (iPhone == "" || iPass == "") {
					loginInfo = "手机号与密码不能留空"
				} else {
					uniCloud.callFunction({
						name:"loginUser",
						data:{
							phone:vue.inputPhone,
							password:vue.inputPass
						},
						success(s) {
							if(s.result){
								uni.redirectTo({
									url:"../index/index",
									success() {
										uni.showToast({
											title: "登录成功！",
											icon: "none"
										})
									}
								})
							}
						},
						fail(e) {
							console.log(e)
						}
					})
				}

				uni.showToast({
					title: loginInfo,
					icon: "none"
				})
			},
			getPhone(value) {
				this.inputPhone = value
			},
			getPass(value) {
				this.inputPass = value
			},
			checkToRegister(){
				uni.navigateTo({
					url:"../register/register"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		align-items: center;
		flex-direction: column;
		.logo {
			width: 200px;
			height: 200px;
			margin-top: 20px;
		}
		.btn_login {
			margin-top: 30px;
			width: 200px;
		}
		.registerView{
			margin-top: 20px;
			.textToRegister{
				color: green;
			}
		}
		.input{
			margin-top: 10px;
		}
	}
	
</style>
